 /*
 * @name: 纠纷单详情
 * @Author: along
 * @Date: 2019-07-30
 * @Last Modified by: along
 * @Last Modified time: 2020-07-31
 */
<template>
    <div class="disputeDetail">
        <div class="disputeDetail-wrap">
            <!-- header -->
            <div class="disputeDetail-header">
                纠纷单详情
            </div>

            <!-- 买家发起诉讼 -->
            <div
                class="content-wrap"
                v-if="STATUS == 1"
            >
                <div class="content-wrap-list">
                    <div class="content-wrap-top">
                        买家发起投诉
                        <span class="color">
                            （{{ (dataList.hire_deal_expire_time - TIME) | tempFilter(SELF) }}后未处理,平台自动介入进行判罚，请联系买家及时处理）
                        </span>
                    </div>
                    <div class="content-wrap-bottom">
                        发起投诉时间：{{ dataList.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </div>
            </div>

            <!-- 平台介入 -->
            <div
                class="content-wrap"
                v-if="STATUS == 2"
            >
                <div class="content-wrap-list">
                    <div class="content-wrap-top">
                        平台介入判罚
                        <span
                            class="color"
                            v-if="!(dataList.order_info.status == 2 || dataList.order_info.status == 3) && dataList.order_info.complete_time"
                        >
                            （订单结算时间剩余:{{ (dataList.order_info.complete_time - TIME) | tempFilter(SELF) }}请在该时间内处理完成）
                        </span>
                        <span
                            class="color"
                            v-else
                        >
                            --
                        </span>
                    </div>
                    <div class="content-wrap-bottom">
                        介入时间：{{ dataList.admin_involve_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </div>
            </div>

            <!-- 投诉完结 -->
            <div
                class="content-wrap"
                v-if="STATUS == 3"
            >
                <div class="content-wrap-list">
                    <div
                        class="content-wrap-top"
                        :style="{color: FLAG ? '#EE4E59' : '#2FBDB3'}"
                    >
                        {{ FLAG ? '投诉成立' : '驳回投诉' }}
                    </div>
                    <div class="content-wrap-bottom">
                        判罚时间：{{ dataList.admin_deal_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </div>
            </div>

            <!-- main -->
            <div class="wrap">
                <!-- 订单详情 -->
                <p class="wrap-title">
                    订单详情
                </p>
                <div class="wrap-table">
                    <div class="head">
                        <p class="head-text">
                            订单编号：{{ dataList.order_info['order_no'] ? dataList.order_info['order_no'] : '--' }}
                        </p>
                        <p class="head-text">
                            下单时间：{{ dataList.order_info.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </p>
                        <p class="head-text">
                            付款时间：{{ dataList.order_info.pay_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </p>
                    </div>
                    <div class="tableList">
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <img
                                    :src="dataList.goods_info.goods_cover"
                                    @click="fnShowPreview(dataList.goods_info.goods_cover)"
                                >
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{maxWidth: '156px'}"
                                    >
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="dataList.goods_info.goods_title"
                                            placement="top-start"
                                        >
                                            <el-button
                                                type="text"
                                                :style="{padding: '0', color: '#333'}"
                                            >
                                                {{ dataList.goods_info.goods_title }}
                                            </el-button>
                                        </el-tooltip>
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{maxWidth: '156px'}"
                                        @mouseenter="fnHandleFilter(dataList.goods_product_info.spec_list)"
                                    >
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="specFilter"
                                            placement="top-start"
                                        >
                                            <el-button
                                                type="text"
                                                :style="{padding: '0', color: '#333'}"
                                            >
                                                {{ dataList.goods_product_info.spec_list | specFilter }}
                                            </el-button>
                                        </el-tooltip>
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{maxWidth: '156px'}"
                                    >
                                        {{ dataList.goods_info.num ? ('x' + dataList.goods_info.num) : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{maxWidth: '156px'}"
                                    >
                                        {{ dataList.goods_info.goods_price ? ('¥' + dataList.goods_info.goods_price) : '--' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        {{ dataList.order_info.pay_type ? dataList.order_info.pay_type : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        {{ dataList.goods_info.money ? ('¥' + dataList.goods_info.money) : '--' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: '160px'}"
                                    >
                                        <el-button
                                            type="text"
                                            :style="{padding: '0', color: '#333'}"
                                        >
                                            收货姓名：{{ dataList.address_info.user_name ? dataList.address_info.user_name : '--' }}
                                        </el-button>
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: '160px'}"
                                    >
                                        手机：{{ dataList.address_info.phone ? dataList.address_info.phone : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: '160px'}"
                                    >
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="dataList.address_info.detail_info"
                                            placement="top-start"
                                        >
                                            <el-button
                                                type="text"
                                                :style="{padding: '0', color: '#333'}"
                                            >
                                                地址：{{ dataList.address_info.detail_info ? dataList.address_info.detail_info : '--' }}
                                            </el-button>
                                        </el-tooltip>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: '150px'}"
                                    >
                                        公司名：{{ dataList.shop_info.company_name ? dataList.shop_info.company_name : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: '150px'}"
                                    >
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="dataList.shop_info.shop_no"
                                            placement="top-start"
                                        >
                                            <el-button
                                                type="text"
                                                :style="{padding: '0', color: '#333'}"
                                            >
                                                店铺编号：{{ dataList.shop_info.shop_no ? dataList.shop_info.shop_no : '--' }}
                                            </el-button>
                                        </el-tooltip>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        买家姓名:{{ dataList.student_info.true_name ? dataList.student_info.true_name : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        手机:{{ dataList.student_info.phone ? dataList.student_info.phone : '--' }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        ID:{{ dataList.student_info.student_no ? dataList.student_info.student_no : '--' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        {{ dataList.order_info.cancel_apply_type === 1 ? '仅退款' : (dataList.order_info.cancel_apply_type === 2 ? '退款和退货' : '--') }}
                                    </p>
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        {{ dataList.order_info.status === 2 ? '待发货' : (dataList.order_info.status === 3 ? '待收货' : (dataList.order_info.status === 4 ? '订单完成' : '--')) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        {{ dataList.order_info.order_category | typeFilter }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="tableList-active">
                            <div class="tableList-active-wrap">
                                <div class="tableList-content">
                                    <p
                                        class="tableList-content-list"
                                        :style="{width: 'auto'}"
                                    >
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="dataList.order_info.remark"
                                            placement="top-start"
                                        >
                                            <el-button
                                                type="text"
                                                :style="{padding: '0', color: '#333'}"
                                            >
                                                {{ dataList.order_info.remark ? dataList.order_info.remark : '--' }}
                                            </el-button>
                                        </el-tooltip>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 买家举证 -->
                <p class="wrap-title">
                    买家举证
                </p>
                <div class="wrap-info">
                    <p class="wrap-info-list">
                        投诉编号:
                        <span class="wrap-info-text">
                            {{ dataList.dispute_no ? dataList.dispute_no : '--' }}
                        </span>
                    </p>
                    <p
                        class="wrap-info-list"
                    >
                        投诉原因:
                        <span class="wrap-info-text">
                            {{ dataList.reason ? dataList.reason : '--' }}
                        </span>
                    </p>
                    <p
                        class="wrap-info-list"
                        :style="{width: 'calc(100% - 800px)'}"
                    >
                        投诉二级类型:
                        <span class="wrap-info-text">
                            {{ dataList.reason_detail ? dataList.reason_detail : '--' }}
                        </span>
                    </p>
                    <p class="wrap-info-list">
                        申请时间:
                        <span class="wrap-info-text">
                            {{ dataList.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </span>
                    </p>
                    <p
                        class="wrap-info-list"
                        :style="{width: 'calc(100% - 400px)'}"
                    >
                        发起人:
                        <span class="wrap-info-text">
                            {{ dataList.student_info.true_name ? dataList.student_info.true_name : '--' }}
                        </span>
                    </p>
                    <p
                        class="wrap-info-list"
                        :style="{width: 'calc(100% - 10px)'}"
                    >
                        投诉说明:
                        <span class="wrap-info-text">
                            {{ dataList.desc ? dataList.desc : '--' }}
                        </span>
                    </p>
                    <div
                        class="wrap-info-list"
                        :style="{width: 'calc(100% - 10px)', height: '120px'}"
                    >
                        图片凭证:
                        <div class="wrap-info-image">
                            <div
                                v-for="(option,i) in dataList.evidence_list"
                                :key="i"
                                class="wrap-info-box"
                                :style="{background: `url(${option}) center center`, backgroundSize: 'cover'}"
                                @click="fnShowPreview(dataList.evidence_list, i)"
                            />
                        </div>
                    </div>
                </div>

                <!-- 卖家举证 -->
                <div v-if="STATUS == 2 || STATUS== 3">
                    <p class="wrap-step-line" />
                    <p
                        class="wrap-title"
                        :style="{marginBottom: '31px'}"
                    >
                        卖家举证
                    </p>
                    <div class="wrap-info">
                        <p class="wrap-info-list">
                            售后类型:
                            <span class="wrap-info-text">
                                {{ dataList.admin_deal_type === 0 ? '待处理' : (dataList.admin_deal_type === 1 ? '仅退款' : (dataList.admin_deal_type === 2 ? '退货退款' : '--')) }}
                            </span>
                        </p>
                        <p
                            class="wrap-info-list"
                            :style="{width: 'calc(100% - 400px)'}"
                        >
                            拒绝原因:
                            <span class="wrap-info-text">
                                {{ dataList.order_info.cancel_apply_refuse_reason ? dataList.order_info.cancel_apply_refuse_reason : '--' }}
                            </span>
                        </p>
                        <p class="wrap-info-list">
                            举证时间:
                            <span class="wrap-info-text">
                                {{ dataList.hire_deal_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                            </span>
                        </p>
                        <p
                            class="wrap-info-list"
                            :style="{width: 'calc(100% - 400px)'}"
                        >
                            申诉卖家:
                            <span class="wrap-info-text">
                                {{ dataList.shop_info.company_name ? dataList.shop_info.company_name : '--' }}
                            </span>
                        </p>
                        <p
                            class="wrap-info-list"
                            :style="{width: 'calc(100% - 10px)'}"
                        >
                            申诉说明:
                            <span class="wrap-info-text">
                                {{ dataList.hire_desc ? dataList.hire_desc : '--' }}
                            </span>
                        </p>
                        <div
                            class="wrap-info-list"
                            :style="{width: 'calc(100% - 10px)', height: dataList.hire_evidence_list.length > 0 ? '120px' : '20px'}"
                        >
                            图片凭证:
                            <div
                                class="wrap-info-image"
                                v-if="dataList.hire_evidence_list.length > 0"
                            >
                                <div
                                    v-for="(option,i) in dataList.hire_evidence_list"
                                    :key="i"
                                    class="wrap-info-box"
                                    :style="{background: `url(${option}) center center`, backgroundSize: 'cover'}"
                                    @click="fnShowPreview(dataList.hire_evidence_list, i)"
                                />
                            </div>
                            <div v-else>
                                --
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 投诉完结 -->
            <div
                v-if="STATUS == 3"
                class="wrap-result"
            >
                <p class="title">
                    平台客服介入
                </p>
                <p class="desc">
                    平台客服于{{ dataList.admin_deal_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}介入判罚
                </p>
                <p
                    class="title"
                    :style="{marginTop: 0}"
                >
                    判罚结果
                </p>
                <p
                    class="desc"
                    :style="{marginBottom: '16px'}"
                >
                    你好，我是掌大投诉处理客服，现将投诉处理结果告知如下:
                </p>
                <div class="result">
                    <p class="result-list">
                        判定结果
                        <span
                            :style="{color: FLAG ? '#EE4E59' : '#2FBDB3', fontWeight: '500'}"
                        >
                            {{ FLAG ? '投诉成立' : '驳回诉讼' }}
                        </span>
                    </p>
                    <p class="result-list">
                        {{ FLAG ? '违规原因' : '驳回原因' }}
                        <span>
                            {{ dataList.admin_deal_reason ? dataList.admin_deal_reason : '--' }}
                        </span>
                    </p>
                    <p class="result-list">
                        {{ FLAG ? '处理结果' : '判定结果' }}
                        <span>
                            {{ FLAG ? (dataList.admin_deal_type == 2 ? '订单将按退货退款流程处理，并按照平台规则进行处罚。谢谢您的理解与支持！' : (dataList.admin_deal_type == 1 ? '订单将按仅退款流程处理，并按照平台规则进行处罚。请知悉，谢谢您的理解与支持！' : '--')) : '请与买家进行协商解决问题' }}
                        </span>
                    </p>
                </div>
            </div>

            <!-- 返回 -->
            <el-button
                v-if="STATUS == 1 || STATUS == 3"
                size="small"
                type="primary"
                :style="{width: '126px', height: '36px', marginTop: '32px', marginLeft: '50%',transform: 'translateX(-50%)'}"
                @click="()=>{
                    this.$router.push({
                        name: 'disputeList'
                    })
                }"
            >
                返回
            </el-button>

            <!-- 平台操作 -->
            <div
                v-if="STATUS == 2"
                :style="{marginTop: '32px'}"
            >
                <el-button
                    size="small"
                    type="default"
                    :style="{width: '126px', height: '36px', marginLeft: '32px'}"
                    @click="platform.dialogVisibleReject = true"
                >
                    驳回投诉
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    :style="{width: '126px', height: '36px', marginLeft: '52px'}"
                    @click="platform.dialogVisibleBlish = true"
                >
                    投诉成立
                </el-button>
            </div>
        </div>

        <!-- 驳回诉讼 -->
        <el-dialog
            title="平台判罚-驳回诉讼"
            :visible.sync="platform.dialogVisibleReject"
            width="640px"
            :close-on-click-modal="false"
        >
            <div class="platform">
                <p class="platform-head">
                    *
                    <span class="platform-title">
                        驳回原因
                    </span>
                </p>
                <el-input
                    type="textarea"
                    placeholder="请输入驳回的原因"
                    v-model="platform.reason"
                    maxlength="140"
                    show-word-limit
                    :autosize="{ minRows: 3, maxRows: 7}"
                />
            </div>
            <span
                slot="footer"
                :style="{display: 'flex', justifyContent: 'center', marginBottom: '20px'}"
            >
                <el-button
                    @click="platform.dialogVisibleReject = false"
                    size="small"
                    :style="{width: '100px', height: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :disabled="!platform.reason"
                    :style="{width: '100px', height: '32px', marginLeft: '60px'}"
                    @click="fnReject()"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>

        <!-- 投诉成立 -->
        <el-dialog
            title="平台判罚-投诉成立"
            :visible.sync="platform.dialogVisibleBlish"
            width="640px"
            :close-on-click-modal="false"
        >
            <div class="platform">
                <p class="platform-head">
                    *
                    <span class="platform-title">
                        违规原因
                    </span>
                </p>
                <el-input
                    type="textarea"
                    placeholder="请输入违规的原因"
                    v-model="platform.admin_deal_reason"
                    maxlength="140"
                    show-word-limit
                    :autosize="{ minRows: 3, maxRows: 7}"
                />
                <p
                    class="platform-head"
                    :style="{marginTop: '24px'}"
                >
                    *
                    <span class="platform-title">
                        处理结果
                    </span>
                </p>
                <div class="platform-type">
                    <el-radio
                        v-model="platform.type"
                        :label="1"
                    >
                        仅退款
                    </el-radio>
                    <el-radio
                        v-model="platform.type"
                        :label="2"
                    >
                        退货退款
                    </el-radio>
                </div>
                <div v-if="platform.type === 2">
                    <p
                        class="platform-head"
                        :style="{marginTop: '24px'}"
                    >
                        *
                        <span class="platform-title">
                            退货地址
                        </span>
                    </p>
                    <el-select
                        v-model="platform.reject_address_no"
                        placeholder="请选择退货地址"
                        style="width: 100%"
                        clearable
                    >
                        <el-option
                            v-for="item in addressList"
                            :key="item.address_no"
                            :label="item.address_title"
                            :value="item.address_no"
                        />
                    </el-select>
                </div>
            </div>
            <span
                slot="footer"
                :style="{display: 'flex', justifyContent: 'center', marginBottom: '20px'}"
            >
                <el-button
                    @click="platform.dialogVisibleBlish = false"
                    size="small"
                    :style="{width: '100px', height: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :disabled="!platform.admin_deal_reason || (platform.type === 2 && !platform.reject_address_no)"
                    :style="{width: '100px', height: '32px', marginLeft: '60px'}"
                    @click="fnBlish()"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    components: {
        imgPreview
    },
    data () {
        return {
            platform: {
                dialogVisibleReject: false,
                reason: '',
                dialogVisibleBlish: false,
                type: 1,
                admin_deal_reason: '',
                reject_address_no: ''
            },
            specFilter: '',
            dispute_no: '',
            dataList: {
                "dispute_no": 0,
                "order_info": {
                    "order_no": "",
                    "order_category": "",
                    "status": 0,
                    "remark": "",
                    "cancel_apply_refuse_reason": "",
                    "create_time": 0,
                    "complete_time": 0,
                    "pay_type": "",
                    "pay_time": 0
                },
                "goods_info": {
                    "num": 0,
                    "money": 0,
                    "goods_no": "",
                    "goods_title": "",
                    "goods_price": 0,
                    "goods_cover": ""
                },
                "goods_product_info": {
                    "sku": "",
                    "barcode": "",
                    "goods_specs": [
                        {
                            "name": "",
                            "value": ""
                        }
                    ]
                },
                "shop_info": {
                    "shop_no": "",
                    "company_name": ""
                },
                "student_info": {
                    "student_no": "",
                    "true_name": "",
                    "phone": ""
                },
                "address_info": {
                    "user_name": "",
                    "phone": "",
                    "detail_info": "",
                    "province_name": "",
                    "city_name": "",
                    "county_name": ""
                },
                "status": 0,
                "reason": "",
                "reason_detail": "",
                "desc": "",
                "create_time": 0,
                "hire_desc": "",
                "hire_deal_time": 0,
                "hire_deal_expire_time": 0,
                "admin_involve_time": 0,
                "admin_deal_type": 0,
                "admin_deal_reason": 0,
                "admin_deal_time": 0
            },
            authResult: {},
            STATUS: -1, //1：待处理，2：平台处理中，3：投诉通过，-2：投诉驳回
            FLAG: false,//true: 投诉通过 false:投诉驳回
            SELF: this,
            COUNT_TIME: null,
            TIME: parseInt(new Date().getTime() / 1000),
            // 商家退货地址列表
            addressList: []
        };
    },
    filters: {
        tempFilter(val, SELF) {
            return SELF.fnMinuteFormate(val);
        },
        specFilter(val) {
            let str = '';

            for (let i in val) {
                str += val[i].value;
                if (i < val.length - 1) {
                    str += ',';
                }
            }

            return str ? str : '--';
        },
        typeFilter(val) {
            if(val == 0) {
                return '拼团';
            } else if (val == 1) {
                return '秒杀';
            } else if (val == 2) {
                return '商圈';
            } else if (val == 3) {
                return '折扣';
            } else if (val == 4) {
                return '抽奖';
            } else if (val == 5) {
                return '0元购';
            } else if (val == 6) {
                return '砍价';
            } else {
                return '--';
            }
        }
    },
    watch: {
        platform: {
            handler: function (val) {
                if(!val.dialogVisibleReject) {
                    this.platform.reason = '';
                }
                if(!val.dialogVisibleBlish) {
                    this.platform.admin_deal_reason = '';
                }
            },
            deep: true,
        }
    },
    created () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '订单管理'},{title: '纠纷单详情'}]);
        this.authResult = this.$route.meta.authResult;
        if(this.$route.query.dispute_no) {
            this.dispute_no = this.$route.query.dispute_no;
        } else {
            this.$notify({
                title: '提示',
                message: '投诉编号为空',
                type: 'warning',
                duration: 2000
            });
            return false;
        }
        this.init();
    },
    methods: {
        /**
         * 数据初始化
         */
        init () {
            this.getDate();
        },

        /**
         * @description 获取数据
         */
        getDate () {
            this.$post('/student/shop_goods_order_dispute%5Cget_detail', {
                dispute_no: this.dispute_no
            }, resp => {
                if (resp.code == 1) {
                    this.dataList = {
                        ...resp.data
                    };
                    // 获取商家地址列表
                    this.getAddressList();

                    this.STATUS = this.dataList.status == 1 ? 1 : (this.dataList.status == 2 ? 2 : (this.dataList.status == 3 || this.dataList.status == -2 ? 3 : 1));
                    if(this.dataList.status == 3) {
                        this.FLAG = true;
                    }
                    if(this.dataList.status == -2) {
                        this.FLAG = false;
                    }

                    if(this.STATUS == 1 || this.STATUS == 2) {
                        this.fnCountDown(this.STATUS, this.dataList);
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description: 驳回投诉
         */
        fnReject () {
            this.$post('/student/shop_goods_order_dispute%5Csubmit_judge', {
                dispute_no: this.dispute_no,
                action: 'reject',
                admin_deal_reason: this.platform.reason,
                admin_deal_type: ''
            }, resp => {
                if (resp.code == 1) {
                    this.platform.dialogVisibleReject = !this.platform.dialogVisibleReject;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getDate();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description: 投诉成立
         */
        fnBlish () {
            this.$post('/student/shop_goods_order_dispute%5Csubmit_judge', {
                dispute_no: this.dispute_no,
                action: 'pass',
                admin_deal_reason: this.platform.admin_deal_reason,
                admin_deal_type: this.platform.type,
                reject_address_no: this.platform.type === 2 ? this.platform.reject_address_no : ''
            }, resp => {
                if (resp.code == 1) {
                    this.platform.dialogVisibleBlish = !this.platform.dialogVisibleBlish;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getDate();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description: 规格文案处理
         */
        fnHandleFilter (val) {
            let str = '';

            for (let i in val) {
                str += val[i].value;
                if (i < val.length - 1) {
                    str += ',';
                }
            }

            this.specFilter = str ? str : '--';
        },

        /**
         * @description: 倒计时
         */
        fnCountDown (param, list) {
            if(param == 1) {
                let type = 'hire_deal_expire_time';

                if(Number(this.dataList[type]) > 0) {
                    this.COUNT_TIME = setTimeout(()=>{
                        this.$set(this.dataList, type, this.dataList[type] - 1);
                        this.fnCountDown(param, list);
                    },1000);
                } else {
                    this.$set(this.dataList, type, 0);
                    clearTimeout(this.COUNT_TIME);
                    return false;
                }
            } else if (param == 2) {
                if(Number(this.dataList.order_info.complete_time) > 0) {
                    this.COUNT_TIME = setTimeout(()=>{
                        let order_info = JSON.parse(JSON.stringify(list.order_info));

                        order_info.complete_time--;
                        this.$set(this.dataList, 'order_info', order_info);
                        this.fnCountDown(param, list);
                    },1000);
                } else {
                    this.$set(this.dataList, type, 0);
                    clearTimeout(this.COUNT_TIME);
                    return false;
                }
            } else {
                return false;
            }
        },

        /**
         * @description: 指定范围时间戳转换小时/分钟/秒
         * @param   {val}   Number      //时间戳
         */
        fnMinuteFormate(second){
            const days = Math.floor(second / 86400);
            const hours = Math.floor((second % 86400) / 3600);
            const minutes = Math.floor(((second % 86400) % 3600) / 60);
            const seconds = Math.floor(((second % 86400) % 3600) % 60);
            const forMatDate = {
                days: days,
                hours: hours < 10 ? ('0' + hours) : hours,
                minutes: minutes < 10 ? ('0' + minutes) : minutes,
                seconds: seconds < 10 ? ('0' + seconds) : seconds
            };

            return forMatDate.days + '天' + forMatDate.hours + ':' + forMatDate.minutes + ':' + forMatDate.seconds;
        },

        /**
         * 查看图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         */
        fnShowPreview(images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ], 0);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 获取商家退货地址列表
         */
        getAddressList() {
            this.$post('/student/shop_refund_address%5Cget_simple_list', {
                shop_no: this.dataList.shop_info.shop_no,
            }, resp => {
                if (resp.code === 1) {
                    this.addressList = resp.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.disputeDetail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 12px 0 12px;
    &-wrap {
        flex: 1;
        background: #ffffff;
        padding-bottom: 32px;
        box-sizing: border-box;
        padding: 0 24px 42px 24px;
    }
    &-header {
        font-size: 20px;
        width: 100%;
        height: 68px;
        line-height: 68px;
        box-sizing: border-box;
        padding-left: 11px;
        border-bottom: 1px #F0F2F7 solid;
        font-weight: 500;
        position: relative;
        &::after {
            content: '';
            position: absolute;
            width:3px;
            height:20px;
            background:rgba(24,144,255,1);
            top: 23px;
            left: 0;
        }
    }
    .content-wrap {
        box-sizing: border-box;
        margin-top: 24px;
        padding-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px #EBEEF5 solid;
        .content-wrap-list {
            display: flex;
            flex-direction: column;
            .content-wrap-top {
                color: #3F454B;
                font-size: 18px;
                font-weight: 500;
                height: 18px;
                margin-bottom: 14px;
                .color {
                    color: #EE4E59;
                }
            }
            .content-wrap-bottom {
               color: #666666;
               font-size: 14px;
               height: 14px;
            }
        }
    }
    .wrap {
        display: flex;
        margin-left: 0px;
        margin-right: 0px;
        flex-direction: column;
        box-sizing: border-box;
        background: #FBFBFB;
        border: 1px solid #eeeeee;
        border-radius: 2px;
        padding: 32px;
        margin-top: 32px;
        &-title {
            font-size: 16px;
            color: #333333;
            margin-bottom: 16px;
            font-weight: 500;
        }
        &-table {
            width: 100%;
            background: rgba(255,255,255,1);
            border:1px solid rgba(238,238,238,1);
            box-sizing: border-box;
            padding: 14px 24px 24px 24px;
            margin-bottom: 40px;
            .head {
               width: 100%;
               display: flex;
               height: 14px;
               align-items: center;
               padding-bottom: 28px;
               box-sizing: border-box;
               border-bottom: 1px #EBEEF5 solid;
               margin: 14px 0;
                .head-text {
                   color: #999999;
                   font-size: 12px;
                   position: relative;
                   margin-right: 45px;
                   &::after {
                        content: '';
                        position: absolute;
                        width:1px;
                        height:16px;
                        background:rgba(220,223,230,1);
                        top: -2px;
                        right: -34px;
                   }
                }
                .head-text:last-child {
                    &::after {
                        content: '';
                        position: absolute;
                        width:0px;
                   }
                }
            }
            .tableList {
                width: 100%;
                height: 95px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                overflow: hidden;
                overflow-x: auto;
                &::-webkit-scrollbar {
                    height: 2px;
                }
                .tableList-active {
                    flex: 1;
                    height: 95px;
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    &-wrap {
                        display: flex;
                        img {
                            width: 95px;
                            height: 95px;
                            margin-right: 10px;
                            cursor: pointer;
                        }
                        .tableList-content {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            &-list {
                                color: #333333;
                                font-size: 14px;
                                height: 20px;
                                line-height: 20px;
                                margin-bottom: 5px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
        }
        .wrap-info {
            width: 100%;
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            &-list {
                width: 365px;
                font-size: 14px;
                color: #666666;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 24px;
                display: flex;
                .wrap-info-text {
                    color: #333;
                    padding-left: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .wrap-info-image {
                    display: flex;
                    height: 120px;
                    align-items: center;
                    margin-left: 10px;
                    cursor: pointer;
                    .wrap-info-box {
                        width: 120px;
                        height: 120px;
                        border-radius: 4px;
                        margin-right: 24px;
                        img {
                            width: 120px;
                            height: 120px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
        .wrap-step-line {
            width: 100%;
            height:1px;
            background:rgba(235,238,245,1);
            margin: 8px 0 32px 0;
        }
    }
    .wrap-result {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .title {
            color: #333;
            font-size: 16px;
            font-weight: 500;
            margin: 32px 0 16px 0px;
        }
        .desc {
           color: #333333;
           font-size: 14px;
           margin-bottom: 32px;
        }
        .result {
            width: calc(100% - 64px);
            background:rgba(251,251,251,1);
            border:1px solid rgba(238,238,238,1);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding: 16px 24px 2px 24px;
            &-list {
                height: 22px;
                display: flex;
                align-items: center;
                color: #666666;
                font-size: 14px;
                margin-bottom: 12px;
                span {
                    color: #1D2023;
                    padding-left: 24px;
                }
            }
        }
    }
    .platform {
        display: flex;
        flex-direction: column;
        .platform-head {
           color: #FF3030;
           font-size: 14px;
           margin-bottom: 16px;
           span {
               color: #333333;
           }
        }
        .platform-type {
            width: 100%;
            height: 36px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }
    }
}
</style>

<style lang="less">
.disputeDetail {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 32px 64px 20px 64px;
    }
    .platform-type .el-radio {
        width: 240px;
        height: 36px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        border:1px solid rgba(220,223,230,1);
        display: flex;
        align-items: center;
        padding-left: 20px;
    }
}
</style>
